<div  id="dictList" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" style=" height:100%;margin: 0px;padding: 0px;">
    <div  id="bodyFrame" class="panel panel-default"  style="margin: 0px;border-radius: 0px" >
        <div id="topBody" class="panel-heading" style="margin: 0px;padding: 5px;" >
            <div style="float: left;">
                <a class="navbar-brand" href="#">字典列表</a>
            </div>
            <div style="float: right;">
                <button @click="jumpToEdit()"  target="_self" class="btn btn-primary" type="button">
                    <span class="glyphicon glyphicon-plus"></span> 添加一个字典资源
                </button>
            </div>
            <br/><br/>
        </div>
        <div id="centerBody" class="panel-body">
            <!--列表视图-->
            <div class="col-md-4 ">
                <div class="">
                    <div class="list-group-item active">字典类型</div>
                    <li v-for="item in sources" style="list-style-type:none">
                        <button class="list-group-item" v-on:click="select(item.codeType)"> <span class="badge">{{item.count}}</span> {{item.typeName}} </button>
                    </li>
                </div>
            </div>
            <div class="col-md-8 ">
                <!--面板-->
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">图片资源管理器</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>类型编码</th>
                                <th>类型名称</th>
                                <th>字典编码</th>
                                <th>字典值</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in itemsSources">
                                <td v-for='it in filedList'>{{item[it]}}</td>
                                <td><button v-on:click="deleteItem(item.id)" class="btn btn-default">删除</button></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottomBody" class="panel-footer">
            <!--底部-->
        </div>
    </div>
</div>


<script>
    //采用vue
    var dictList = new Vue({
        el: '#dictList',
        data: {
            initUrl: Vue.prototype.getUrl('/config/dict/findTop'),
            listUrl: Vue.prototype.getUrl('/config/dict/findByType'),
            deleteUrl: Vue.prototype.getUrl('/config/dict/delete'),
            itemsSources: [],
            sources: [],
            filedList:['id','codeType','typeName','codeCode','codeValue']
        },
        methods: {
            init:function () {
                this.$http.post(this.initUrl).then(function(data){
                    if(data.data.success){
                        //将自己的
                        this.sources = data.data.data;
                    }else{
                        alert("查询列表失败："+data.data.errorMessage);
                    }

                }).catch(function(){
                    alert('服务器异常！');
                });
            },
            jumpToEdit:function() {
                //加载页面
                loadPageToBodyMain('/show/config/dict/dictAdd');
            },
            /**
             * 选择触发加载方法
             * */
            select:function (selectType) {
                //加载对应的选择项
                this.getSelectItems(selectType);
            },
            /**
             * 加载对应的选择项
             * */
            getSelectItems:function(selectType){
                this.$http.post(this.listUrl,selectType).then(function(data){
                    console.log(this.listUrl+': '+data.data.success);
                    if(data.data.success){
                        //将自己的
                        var list = data.data.data;
                        this.itemsSources = list;
                    }else{
                        alert("查询列表失败："+data.data.errorMessage);
                    }

                }).catch(function(){
                    alert('服务器异常！');
                });
            },
            /**
             * 删除一项
             * @param id
             */
            deleteItem:function(id){
                if(confirm("确定要删除吗?请确认资源未被引用！")){
                    //发请求删除
                    this.$http.post(this.deleteUrl,id).then(function(data){
                        if(data.data.success){
                            alert('删除成功 ！');
                            //刷新页面
                            location.reload();
                        }else{
                            alert("删除失败："+data.data.errorMessage);
                        }

                    }).catch(function(){
                        alert('服务器异常！');
                    });
                }
            },
        },
        created: function () {
            //加载列表
            this.init();
        },
    });
</script>
<!--</body>-->
<!--</html>-->